<template>
    <div class="layout" >
       <TopNav class="nav" :toggle-menu-button-visible="true"/>
       <div class="content">
            <aside v-show="menuVisible">
                <div class="box"></div>
                <div class="aside-link">
                    <h2>文档</h2>
                    <ol>
                        <li>
                            <router-link to="/doc/intro">介绍</router-link>
                        </li>
                        <li>
                            <router-link to="/doc/get-started">开始</router-link>
                        </li>
                    </ol>
                    <h2 class="componentList">组件列表</h2>
                    <ol>
                        <li>
                            <router-link to="/doc/switch">switch 组件</router-link>
                        </li>
                        <li>
                            <router-link to="/doc/button">button 组件</router-link>
                        </li>
                        <li>
                            <router-link to="/doc/dialog">dialog 组件</router-link>
                        </li>
                        <li>
                            <router-link to="/doc/tabs" >tabs 组件</router-link>
                        </li>
                        <li>
                            <router-link to="/doc/tabArray" >tab-array 组件</router-link>
                        </li>
                        <li>
                            <router-link to="/doc/textInput" >textInput 组件</router-link>
                        </li>
                        <li>
                            <router-link to="/doc/alert" >Alert 组件</router-link>
                        </li>
                    </ol>
                </div>
            </aside>
            <main> 
                <router-view></router-view>
            </main>
       </div>
    </div>
</template>

<script lang="ts">
import TopNav from "../components/TopNav.vue";
import { Ref,inject} from 'vue';
    export default {
    name: "doc",
    components: { TopNav },
    setup(){
        const menuVisible = inject<Ref<boolean>>('menuVisible')
        return{menuVisible}  
    }
}
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  > .nav {
    flex-shrink: 0;
  }
  > .content {
    flex-grow: 1;
    padding-top: 40px;
    padding-left: 300px;
    overflow: auto;
    @media (max-width: 500px) {
      padding-left: 0; 
    }
  }
}
.content {
  display: flex;
 
  > aside {
    flex-shrink: 0;
  }
  > main {
    flex-grow: 1;
    padding: 16px;
  }
}
aside{
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 5;
    
    >.box{
        height: 100px;
        width: 200px;
        padding: 20px;
    }
    >.aside-link{
        width: 200px;
        height: 100%;
        padding: 20px;
        border-right: 1px solid rgb(218, 210, 210); 
        >h2{
            margin-bottom: 10px ;
        }
        >ol{
            >li{
                color: gray;
                padding: 4px 0;
                margin-bottom: 5px;
            }
        }
    }
    main{
        overflow:auto;
    }
}
.router-link-active{
    color: rgb(9, 95, 16); 
    padding-left:10px ;
    border-left: 3px solid rgb(52, 206, 65);
}
.componentList{
    margin-top: 20px;
}

</style>